
<style scoped>
/* scoped用于防止被别的组件的css样式修改 */
.el-row {
  margin-bottom: 8px;
  /* &:last-child {
      margin-bottom: 0;
    } */
}
/* .dynamic >>> .el-col */
.el-col {
  border-radius: 4px;
  padding-right: 0;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fbf5ef;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 100px;
  text-align: center;
}
.tabel_data .grid-content {
  min-height: 60px;
  text-align: center;
  line-height: 60px;
  font-family: "微软雅黑";
  font-weight: 800;
  font-size: 18px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.num_text {
  color: #ff6900;
  font-size:20px;
  font-weight: 700;
  line-height: 45px;
  padding-top: 10px;
}
.data {
  margin-top: 20px;
}
.tabel_data {
  margin-top: 10px;
}
.logo {
  float: left;
  height: 10px;
  width: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background-color: #005dff;
}
.title_new {
  float: left;
  background-color: #f43b3b;
  width: 40px;
  height: 20px;
  line-height: 20px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
}
.title_time {
  float: left;
  height: 20px;
  line-height: 20px;
}
.article_title {
  width: 100%;
  height: 40px;
  float: left;
  margin-bottom: 5px;
  padding: 10px;
}
</style>
<template>
  <div>
    <div>
      <div style="color: #999" v-if="dataList.list">
        截止时间：{{ dataList.list[0].inputTime | dateFMT }}
      </div>
      <div class="data">
        <el-row :gutter="8">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="num_text">{{ confirmed }}</div>
              <div class="desc_text" style="font-size:16px;">累计确诊</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="num_text">{{ suspected }}</div>
              <div class="desc_text" style="font-size:16px;">累计疑似</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="num_text">{{ dead }}</div>
              <div class="desc_text" style="font-size:16px;">累计死亡</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="num_text">{{ cure }}</div>
              <div class="desc_text" style="font-size:16px;">累计治愈</div>
            </div></el-col
          >
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="num_text">{{ severe }}</div>
              <div class="desc_text" style="font-size:16px;">累计重症</div>
            </div></el-col
          >
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="num_text">{{ outside }}</div>
              <div class="desc_text" style="font-size:16px;">境外输入</div>
            </div></el-col
          >
        </el-row>
      </div>
    </div>

    <div>
      <div style="color: #999">国内疫情</div>
      <div class="tabel_data">
        <el-row>
          <el-col :span="4">
            <div
              class="grid-content bg-purple"
              style="background-color: #e0e1fd"
            >
              地区
            </div>
          </el-col>
          <el-col :span="4">
            <div
              class="grid-content bg-purple-light"
              style="background-color: #dd837f"
            >
              新增确诊
            </div>
          </el-col>
          <el-col :span="4">
            <div
              class="grid-content bg-purple"
              style="background-color: #f4d3aa"
            >
              现有疑似
            </div>
          </el-col>
          <el-col :span="4">
            <div
              class="grid-content bg-purple-light"
              style="background-color: #fdcccb"
            >
              新增死亡
            </div>
          </el-col>
          <el-col :span="4">
            <div
              class="grid-content bg-purple"
              style="background-color: #c5eab4"
            >
              新增治愈
            </div>
          </el-col>
          <el-col :span="4">
            <div
              class="grid-content bg-purple-light"
              style="background-color: #d2d2d2"
            >
              境外输入
            </div>
          </el-col>
        </el-row>

        <!-- :data="dataList.list"如果用的是el-row的控件的话用v-if='item in dataList.list' ,:key='item.id' -->
        <!-- 然后之后的el-col中的值就为{{item.province}}等 -->
        <el-table
          :data="dataList.list"
          size="small"
          :show-header="false"
          style="width: 100% font-size:20px;font-weight:'bold;margin-top:-30px"
        >
          <el-table-column
            prop="province"
            align="center"
            style="font-size: 20px"
          >
            <template v-slot="scope">
              <span style="font-size: 20px; font-weight: blod">{{
                scope.row.province
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="confirmed"
            align="center"
            style="font-size: 20px"
          >
            <template v-slot="scope">
              <span
                style="color: #dd837f; font-size: 20px; font-weight: blod"
                >{{ scope.row.confirmed }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="suspected"
            align="center"
            style="font-size: 20px"
          >
            <template v-slot="scope">
              <span
                style="color: #ffba00; font-size: 20px; font-weight: blod"
                >{{ scope.row.suspected }}</span
              >
            </template>
          </el-table-column>
          <el-table-column style="color: red" prop="dead" align="center">
            <template v-slot="scope">
              <span
                style="
                  color: rgba(207, 25, 25, 0.863);
                  font-size: 20px;
                  font-weight: blod;
                "
                >{{ scope.row.dead }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="cure" align="center" style="font-size: 20px">
            <template v-slot="scope">
              <span
                style="
                  color: rgba(23, 224, 74, 0.938);
                  font-size: 20px;
                  font-weight: blod;
                "
                >{{ scope.row.cure }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="outside" align="center">
            <template v-slot="scope">
              <span style="color: gray; font-size: 20px; font-weight: blod">{{
                scope.row.outside
              }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页按钮 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="obj1.pageSize"
          :current-page="obj1.page"
          @current-change="change1"
          :total="dataList.total"
        >
        </el-pagination>
      </div>
    </div>

    <div>
      <!-- {{ article.list }} -->
      <div style="color: #999; margin-top: 15px; margin-bottom: 15px">
        最新进展
      </div>
      <div style="background-color: #f8f8f8; padding: 10px">
        <div
          v-for="(item, index) in article.list"
          :key="item.id"
          style="margin-top: 10px"
        >
          <div class="article_title" style="background-color: #f8f8f8">
            <div class="logo"></div>
            <div v-if="index == 0" class="title_new">最新</div>
            <div class="title_time">{{ item.publishTime | dateFMT }}</div>
          </div>
          <div
            style="
              background-color: #fff;
              border-radius: 8px;
              padding: 10px;
              color: #666;
              line-height: 30px;
              font-size: 14px;
              width: 100%;
            "
            @click="detail(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="obj2.pageSize"
          :current-page="obj2.page"
          @current-change="change2"
          :total="article.total"
        >
        </el-pagination>
      </div>
        <el-dialog
            title="文章详情内容"
            :visible.sync="dialogVisible"
            width="60%">
            <h2 >{{article_detail.title}}</h2>
            <div v-html='article_detail.content' class="text_content"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
  </div>
</template>
<style scoped>
  .text_content{
    border: 2px solid lightgray;
    padding: 5px;
    font-size: 18px;
    width: 100%;
    overflow: hidden;
  }
</style>
<script>
import { mapActions, mapState, mapGetters } from "vuex";

import moment from "moment";
export default {
  data() {
    return {
      article_detail: {},
      dialogVisible: false,
      obj1: {
        page: 1,
        pageSize: 10,
      },
      obj2: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    obj1: {
      handler: function () {
        this.page_query(this.obj1);
      },
      deep: true,
    },
    obj2: {
      handler: function () {
        this.page_query_article(this.obj2);
      },
      deep: true,
    },
  },
  filters: {
    dateFMT(str) {
      return moment(str).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  created() {
    this.page_query(this.obj1);
    this.page_query_article(this.obj2);
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
    ...mapState("article", ["article"]),
    ...mapGetters("dataList", [
      "confirmed",
      "suspected",
      "dead",
      "cure",
      "severe",
      "outside",
    ]),
  },

  methods: {
    ...mapActions("dataList", ["page_query"]),
    ...mapActions("article", ["page_query_article", "FindById"]),
    change1(val) {
      // console.log(val);
      this.obj1.page = val;
    },
    change2(val) {
      // console.log(val);
      this.obj2.page = val;
    },
    detail(id) {
      this.dialogVisible = true;
      this.FindById({ id }).then((res) => {
        this.article_detail = res.data;
      });
    },
  },
};
</script>



